<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>菜单管理-主页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layuimini/lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/layuimini/css/public.css}" media="all">
    <link rel="stylesheet" th:href="@{/layuimini/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <!-- 表格头部左侧工具栏 -->
        <script type="text/html" id="toolbar">
            <div class="layui-btn-group layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>新增</button>
                <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="refresh"><i class="layui-icon layui-icon-refresh"></i>刷新</button>
                <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="fold"><i class="layui-icon layui-icon-up"></i>收起</button>
                <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="expand"><i class="layui-icon layui-icon-down"></i>展开</button>
            </div>
        </script>

        <!-- 表格 -->
        <table id="menuTable" class="layui-table" lay-filter="menuListFilter"></table>

        <!-- 操作列 -->
        <script type="text/html" id="rowsBar">
            {{#
            var html = '<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>';
                if(0 === d.menuStatus){
                    html+= '<a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="disable"><i class="layui-icon layui-icon-close"></i>禁用</a>';
                }else if(1 === d.menuStatus){
                    html+= '<a class="layui-btn layui-btn-xs" lay-event="enable"><i class="layui-icon layui-icon-ok"></i>启用</a>';
                }
                html += '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</a>';
                return html;
            }}
        </script>
    </div>
</div>
<script th:src="@{/layuimini/lib/layui-v2.6.3/layui.js}" charset="UTF-8"></script>
<script th:src="@{/layuimini/js/lay-config.js?v=1.0.4}" charset="UTF-8"></script>
<script type="text/javascript" th:inline="javascript">
    layui.use(['table', 'treetable','notice'], function () {
        let $ = layui.jquery,
            table = layui.table,
            notice = layui.notice,
            treetable = layui.treetable;

        let ctxPath = /*[[@{/}]]*/'';

        //渲染树形表格
        tableRender();
        function tableRender() {
            treetable.render({
                treeSpid: -1,                               //最上级的父级id
                treeColIndex: 1,                            //树形图标显示在第几列
                treeIdName: 'menuId',                       //id字段的名称
                treePidName: 'parentMenuId',                //父级节点字段
                elem: '#menuTable',                         //表格id
                treeDefaultClose: true,                     //是否默认折叠
                url: ctxPath + 'system/sysMenu/menuList',
                page: false,
                toolbar: '#toolbar',
                cols: [
                    [
                        {type: 'numbers'},
                        {field: 'menuName', minWidth: 200, title: '菜单名称'},
                        {field: 'menuIcon', minWidth: 90, title: '菜单图标', templet: function(d){
                            if(d.menuIcon){
                                return '<i class="'+d.menuIcon+'"></i>';
                            }else {
                                return '';
                            }
                        }},
                        {field: 'menuUrl', minWidth: 90, title: '菜单url'},
                        {field: 'menuAuth', minWidth: 90, title: '菜单权限'},
                        {field: 'menuTarget', minWidth: 90, title: '打开方式'},
                        { field: 'menuType', width: 80, align: 'center', templet: function (d)
                            {
                                if (0 === d.menuType) {
                                    return '<span class="layui-badge layui-bg-blue">模块</span>';
                                } else if (1 === d.menuType) {
                                    return '<span class="layui-badge layui-bg-green">目录</span>';
                                } else if (2 === d.menuType) {
                                    return '<span class="layui-badge layui-bg-orange">菜单</span>';
                                } else {
                                    return '<span class="layui-badge-rim">按钮</span>';
                                }
                            }, title: '菜单类型'
                        },
                        {field: 'menuSort', width: 80, title: '排序码', align: 'center'},
                        {field: 'py', minWidth: 80, title: '拼音码', align: 'center', hide: true},
                        {field: 'wb', minWidth: 80, title: '五笔码', align: 'center', hide: true},
                        {field: 'menuStatus',minWidth: 100,title: '菜单状态', align: 'center',sort: true, templet: function (d)
                            {return (0 === d.menuStatus) ? '启用' : '作废'}
                        },
                        {title: '操作', minWidth: 220, toolbar: '#rowsBar', align: "center", fixed: 'right'}
                    ]
                ],
                done: function () {                                     //数据渲染完的回调
                    layer.closeAll('loading');                          //关闭数据加载框
                }
            });
        }

        //监听表格头部工具栏事件
        table.on('toolbar(menuListFilter)', function (obj) {
            switch (obj.event) {
                case 'add':
                    openAddOrUpdateMenuDialog();                //添加菜单
                    break;
                case 'refresh':                                 //刷新菜单
                    tableRender();
                    break;
                case 'expand':
                    treetable.expandAll('#menuTable');          //展开菜单
                    break;
                case 'fold':
                    treetable.foldAll('#menuTable');            //折叠菜单
                    break;
            };
        });

        //监听表格行操作列事件
        table.on('tool(menuListFilter)', function (obj) {
            switch (obj.event) {
                case 'edit':
                    openAddOrUpdateMenuDialog(obj.data.menuId);
                    break;
                case 'delete':
                    dealMenu(obj.data.menuId);
                    break;
                case 'enable':
                    updateStatus(obj.data.menuId,'0');
                    break;
                case 'disable':
                    updateStatus(obj.data.menuId,'1');
                    break;
            };
        });

        //打开添加或修改菜单页面
        function openAddOrUpdateMenuDialog(menuId) {
            let url = ctxPath+'system/sysMenu/menuAddOrUpdate';
            let title = '<i class="layui-icon layui-icon-user">新增系统菜单</i>';
            if(menuId){
                url = url+"?menuId="+menuId;
                title = '<i class="layui-icon layui-icon-user">更新系统菜单</i>';
            }
            layer.open({
                title: title,
                type: 2,
                shade: 0.2,
                shadeClose: true,
                offset:'r',
                area: ['35%', '100%'],
                content: url,
                end: function(){
                    tableRender();
                }
            });
        }

        //删除菜单
        function dealMenu(datas) {
            if(datas.length === 0){
                notice.warning('请选择需要删除的记录！');
                return;
            }
            layer.confirm('您确定要删除选中的记录及其所有子级记录？',{title:"提示",icon:0,btn:['确定','取消']},function (index) {
                layer.close(index);
                $.ajax({
                    type:'DELETE',
                    url:ctxPath+'system/sysMenu/deleteMenu/'+datas,
                    dataType:'json',
                    success:function (res){
                        if(res.code === 200){
                            notice.success('删除成功',function(){
                                tableRender();
                            });
                        }else{
                            notice.error(res.msg);
                        }
                    }
                });
            })
        }

        //更新菜单状态
        function updateStatus(menuId,flag) {
            if(null === menuId){
                layer.msg('请选择需要更新的记录！');
                return;
            }
            let statusDesc = (0 === flag) ? '启用' : '作废';
            layer.confirm('您确定要'+statusDesc+'选中的记录及其所有子级记录？',{title:'提示',icon:0,btn:['确定','取消']},function (index) {
                layer.close(index);
                $.ajax({
                    type:'PUT',
                    url:ctxPath+'system/sysMenu/updateMenuStatus/',
                    data:{'menuId':menuId,'menuStatus':flag},
                    dataType:'json',
                    success:function (res){
                        if(res.code === 200){
                            layer.msg('更新成功',function(){
                                tableRender();
                            });
                        }else{
                            layer.msg(res.msg);
                        }
                    }
                });
            })
        }
    });
</script>
</body>
</html>